<template>
  	<div class='container'>
	    <el-row :gutter="20">
	      	<el-col :span="7">
		        <el-card class="card">
		          	<div slot="header" class="clearfix">
		                <el-input v-model.trim="listQuery.phoneticChars" type="text" placeholder="输入股票名称/代码/首字母" @keyup.enter.native="searchStock" clearable>
		                  	<el-button slot="append" icon="el-icon-search"  @click='searchStock'></el-button>
		                </el-input>
	              	</div>
		            <el-table height="688" stripe :data="tableData" v-loading="listLoading" element-loading-text="加载中..." border fit highlight-current-row>
		              	<el-table-column prop="name" label="股票名称" align="center">
              		        <template slot-scope="scope">
					          	<el-button class="preview-button" type="text" @click="showCharts(scope.row)">{{scope.row.name}}</el-button>
					        </template>
		              	</el-table-column>
		              	<el-table-column prop="code" label="股票代码" align="center" show-overflow-tooltip></el-table-column>
		            </el-table>
		            <div class="pagination-container">
		              <el-pagination
		              	small
		              	ref="pagination"
		                background @size-change="handleSizeChange" @current-change="handleCurrentChange"
		                :current-page.sync="listQuery.pageNum"
		                :page-sizes="[20, 30, 50]" :page-size="listQuery.pageSize"
		                layout="total, sizes, prev, pager, next" :total="total">
		              </el-pagination>
		            </div>
		        </el-card>
	      	</el-col>
	      	<el-col :span="17">
		        <el-card class="example">
		          	<div slot="header" class="clearfix">
		          		<span>股权穿透图谱{{tarName}}</span>
		          		<div v-if="tarName" style="float: right" @click="toggle">
			          		<el-tooltip effect="dark" :content="fullstatus ? `取消全屏` : `全屏`" placement="bottom">
				              	<i class="el-icon-rank"></i>
				           	</el-tooltip>
			          	</div>
		          	</div>
		          	<div class="card-body">
		          		<div ref="graphChart" style="width: 100%;height: 754px;"></div>
		        	</div>
		        </el-card>
	      	</el-col>
	    </el-row>
 	</div>
</template>

<script>
  	import { postSec, postCharts } from '../../api/knowledgeMap'
  	import { articleStockList } from '../../api/article'
	import echarts from 'echarts'
	import fullscreen from 'vue-fullscreen'
	import Vue from 'vue'
	Vue.use(fullscreen)
	require('echarts/theme/macarons') // echarts theme

  	export default {
	    name: 'equityRelat',
		created() {
			this.searchStock()

	    },
	    mounted() {
	    	const that = this
		    that.myChart = echarts.init(that.$refs['graphChart'], 'macarons')
		    that.screenSize = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
		    let str = that.$refs['pagination'].$children[2].$el.outerHTML
		    that.$refs['pagination'].$children[2].$el.outerHTML = '</br>' + str
	    },
	    data() {
	      	return {
//	      		originalData: [],
	      		fullstatus: false,
	      		screenSize:'',
	      		tarName:'',
		        total: null,
		        listLoading: false,
		        listQuery: {
		          	pageNum: 1,
		          	pageSize: 20,
		          	phoneticChars: ''
		        },
		        tableData: [],
		        myChart: null
	      	}
	    },
	    methods: {
		    toggle () {
		      this.$fullscreen.toggle(this.$el.querySelector('.example'), {
		        wrap: false,
		        callback: this.fullscreenChange
		      })
		    },
		    fullscreenChange (status) {
		      	this.fullstatus = status
      			if(status){  //true是打开全屏
			      	this.$refs['graphChart'].style.height = this.screenSize + 'px'
   			      	this.$refs['graphChart'].children[0].style.height = this.screenSize + 'px'
			      	this.$refs['graphChart'].children[0].children[0].style.height = this.screenSize + 'px'
      			} else {
					this.$refs['graphChart'].style.height = '754px'
      			}
		    },
	      	searchStock () {
	      		this.listLoading = true
//	      		if(this.listQuery.phoneticChars == ''){
//		        	this.listLoading = false
//		          	this.tableData = Object.assign([], this.originalData)
//	      		} else {
//		        	articleStockList(this.listQuery).then(res => {
//			        	this.listLoading = false
//			        	this.tableData = Object.assign([], res.Data)
//			        	this.total = tar.total
//		        	})
//		        }
	        	articleStockList(this.listQuery).then(res => {
		        	this.listLoading = false
		        	this.tableData = Object.assign([], res.Data)
		        	this.total = res.total * 1
	        	})
	      	},
	      	showCharts(tar) {
	      		let obj  = { secCode: tar.code, type: 'rel_stockright' }
		        postCharts(obj).then(res => {
	        		if(res.Data.length == 0){
	        			this.$message({ type: 'warning', message: tar.name + '暂无数据' })
	        			return
	        		}
		        	let stu = res.Meta
		        	if(stu.Code == 0){
		        		this.tarName = '：' + tar.name
		        		let val
	        		  	try {
						    val = JSON.parse(res.Data[0].value)
					  	} catch (e) {
						    val = {}
					  	}
		        		let links = Object.assign([], val.links)
		        		let cates = Object.assign([], val.categories)
		        		let arr = Object.assign([], val.nodes)
		        		cates.push({ "name": "main", "value": 2 })
		        		arr.map(val => {
		        			if(val.description == tar.code){
		        				val.category = 2
		        				val.symbolSize = 80
		        			}
		        			if(val.category == 1){
		        				val.symbolSize = 60
		        			}else if(val.category == 0){
		        				val.symbolSize = 40
		        			}
		        		})

		        		links.map(item => {
			                item.lineStyle = {
			                	normal: {
			                        color: 'source'
			                    }
	        				}
		        			return item
		        		})
					    let chartOption = {
					        legend: {
					            data: []   //'person', 'industry'
					        },
					        tooltip: {
                    formatter: function(params){
                      if(params.dataType == 'edge'){
                        return params.data.description
                      } else {
                        let tar = params.data.description
                        if(tar && tar != -1){
                          return params.data.name + '(' + params.data.description + ')';
                        } else {
                          return params.name;
                        }
                      }
                    }
					        },
					        series: [{
					            type: 'graph',
					            top: '10%',
					            roam: true, // 是否开启鼠标缩放和平移漫游
					            focusNodeAdjacency: true, // 是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点
					            layout: 'force',
					            draggable: true, //节点是否可拖拽，只在使用力引导布局的时候有用
					            force: {
					                edgeLength: [150, 100],
					                repulsion: 500,
					                gravity: 0.2   //节点受到的向中心的引力因子。该值越大节点越往中心点靠拢
					            },
	                            itemStyle: {
				                    normal: {
				                        borderColor: '#fff',
				                        borderWidth: 1,
				                        shadowBlur: 10,
				                        shadowColor: 'rgba(0, 0, 0, 0.3)'
				                    }
				                },
					            lineStyle: {
					                normal: {
					                    opacity: 0.9,
					                    width: 0.5,
					                    curveness: 0 // 边的曲度，支持从 0 到 1 的值，值越大曲度越大
					                }
					            },
				                emphasis: {   //高亮的图形样式
				                    lineStyle: {
				                        width: 10
				                    }
				                },
					            symbol: 'circle', //关系图节点标记的图形 默认圆圈
					            animation: false,
					            symbolSize: 50,   //关系图节点标记的大小
					            edgeSymbolSize: [2, 8],     //边两端的标记大小
					            edgeSymbol: ['circle', 'arrow'], //边两端的标记类型，可以是一个数组分别指定两端，也可以是单个统一指定
					            label: {
					                normal: {
					                    show: true,
					                    position: "inside",
				                     	textStyle: {
				                         	fontSize: 13
				                     	},
					                    formatter: function(param) {
					                        let tar = param.data.name
					                        if(tar.length > 6){
					                            return tar.slice(0, 6) + '...'
					                        } else {
					                            return tar
					                        }
				    	                }
					                }
					            },
		        	            edgeLabel: {
				    	            normal: {
				    	                show: true,
				    	                textStyle: {
				    	                    fontSize: 12
				    	                },
				    	                formatter: function(param) {
				    	                    return param.data.description
				    	                }
				    	            }
				                },
					            data: arr.map(function (node, idx) {
					                node.id = node.value;
					                return node;
					            }),
					            categories: cates,
					            edges: links,
					        }]
					    }
			      		this.myChart.setOption(chartOption, window.onresize = this.myChart.resize)
		        	} else {
		        		this.$message({ type: 'error', message: stu.Message })
		        	}
		        })
	      	},
			handleSizeChange(val) {
		        this.listQuery.pageSize = val
		        this.searchStock()
	      	},
	      	handleCurrentChange(val) {
		        this.listQuery.pageNum = val
		        this.searchStock()
	      	}
	    }

  	}
</script>

<style scoped>
	/deep/.el-table .el-table__body-wrapper{
		overflow-x: hidden;
	}
  	.card-body {
	    margin-top: 1rem;
  	}
  	.card-body canvas {
	  	width: 100%;
  	}
  	/deep/.el-icon-rank{
  		transform: rotate(45deg) scale(1.5);
    	cursor: pointer;
  	}
	/deep/.pagination-container{
		margin-top: 8px;
  	}
</style>
